<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>部门管理</title>
    <jsp:include page="../../common/background_common.jsp"/>
    <jsp:include page="../../common/page.jsp"/>
</head>
<!--引用ace模板-->
<body class="no-skin" youdao="bind" style="background: white">
    <input id="gritter-light" checked="" type="checkbox" class="ace ace-switch ace-switch-5"/>

    <div class="page-header">
        <h1>
            用户管理
            <small>
                <i class="ace-icon fa fa-angle-double-right"></i>
                维护部门与用户关系
            </small>
        </h1>
    </div>
    <div class="main-content-inner">
        <div class="col-sm-3">
            <div class="table-header">
                部门列表&nbsp;&nbsp;
                <a class="green" href="#">
                    <i class="ace-icon fa fa-plus-circle orange bigger-130 dept-add"></i>
                </a>
            </div>
            <div id="deptList"><!--部门-->
            </div>
        </div>
        <div class="col-sm-9">
            <div class="col-xs-12">
                <div class="table-header">
                    用户列表&nbsp;&nbsp;
                    <a class="green" href="#">
                        <i class="ace-icon fa fa-plus-circle orange bigger-130 user-add"></i>
                    </a>
                </div>
                <div>
                    <div id="dynamic-table_wrapper" class="dataTables_wrapper form-inline no-footer">
                        <div class="row">
                            <div class="col-xs-6">
                                <div class="dataTables_length" id="dynamic-table_length"><label>
                                    展示
                                    <select id="pageSize" name="dynamic-table_length" aria-controls="dynamic-table" class="form-control input-sm">
                                        <option value="10">10</option>
                                        <option value="25">25</option>
                                        <option value="50">50</option>
                                        <option value="100">100</option>
                                    </select> 条记录 </label>
                                </div>
                            </div>
                        </div>
                        <table id="dynamic-table" class="table table-striped table-bordered table-hover dataTable no-footer" role="grid"
                               aria-describedby="dynamic-table_info" style="font-size:14px">
                            <thead>
                            <tr role="row">
                                <th tabindex="0" aria-controls="dynamic-table" rowspan="1" colspan="1">
                                    姓名
                                </th>
                                <th tabindex="0" aria-controls="dynamic-table" rowspan="1" colspan="1">
                                    所属部门
                                </th>
                                <th tabindex="0" aria-controls="dynamic-table" rowspan="1" colspan="1">
                                    邮箱
                                </th>
                                <th tabindex="0" aria-controls="dynamic-table" rowspan="1" colspan="1">
                                    电话
                                </th>
                                <th tabindex="0" aria-controls="dynamic-table" rowspan="1" colspan="1">
                                    状态
                                </th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" aria-label=""></th>
                            </tr>
                            </thead>
                            <tbody id="userList"></tbody>
                        </table>
                        <div class="row" id="userPage">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="dialog-dept-form" style="display: none;">
        <form id="deptForm">
            <table class="table table-striped table-bordered table-hover dataTable no-footer" role="grid">
                <tr>
                    <td style="width: 80px;"><label for="parentId">上级部门</label></td>
                    <td>
                        <select id="parentId" name="parentId" data-placeholder="选择部门" style="width: 200px;"></select>
                        <input type="hidden" name="id" id="deptId"/>
                    </td>
                </tr>
                <tr>
                    <td><label for="deptName">名称</label></td>
                    <td><input type="text" name="name" id="deptName" value="" class="text ui-widget-content ui-corner-all"></td>
                </tr>
                <tr>
                    <td><label for="deptSeq">顺序</label></td>
                    <td><input type="text" name="seq" id="deptSeq" value="1" class="text ui-widget-content ui-corner-all"></td>
                </tr>
                <tr>
                    <td><label for="deptRemark">备注</label></td>
                    <td><textarea name="remark" id="deptRemark" class="text ui-widget-content ui-corner-all" rows="3" cols="25"></textarea></td>
                </tr>
            </table>
        </form>
    </div>
    <div id="dialog-user-form" style="display: none;">
        <form id="userForm">
            <table class="table table-striped table-bordered table-hover dataTable no-footer" role="grid">
                <tr>
                    <td style="width: 80px;"><label for="parentId">所在部门</label></td>
                    <td>
                        <select id="deptSelectId" name="deptId" data-placeholder="选择部门" style="width: 200px;"></select>
                    </td>
                </tr>
                <tr>
                    <td><label for="userName">名称</label></td>
                    <input type="hidden" name="id" id="userId"/>
                    <td><input type="text" name="username" id="userName" value="" class="text ui-widget-content ui-corner-all"></td>
                </tr>
                <tr>
                    <td><label for="userMail">邮箱</label></td>
                    <td><input type="text" name="mail" id="userMail" value="" class="text ui-widget-content ui-corner-all"></td>
                </tr>
                <tr>
                    <td><label for="userTelephone">电话</label></td>
                    <td><input type="text" name="telephone" id="userTelephone" value="" class="text ui-widget-content ui-corner-all"></td>
                </tr>
                <tr>
                    <td><label for="userStatus">状态</label></td>
                    <td>
                        <select id="userStatus" name="status" data-placeholder="选择状态" style="width: 150px;">
                            <option value="1">有效</option>
                            <option value="0">无效</option>
                            <option value="2">删除</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><label for="userRemark">备注</label></td>
                    <td><textarea name="remark" id="userRemark" class="text ui-widget-content ui-corner-all" rows="3" cols="25"></textarea></td>
                </tr>
            </table>
        </form>
    </div>

    <!-- 渲染基础样式（布局） mustache.js 让模板尽量保持简单，甚至连基本的逻辑判断都不需要用-->
    <script id="deptListTemplate" type="x-tmpl-mustache">
        <ol class="dd-list">
            {{#deptList}}
                <li class="dd-item dd2-item dept-name" id="dept_{{id}}" href="javascript:void(0)" data-id="{{id}}">
                    <div class="dd2-content" style="cursor:pointer;">
                        {{name}}
                        <span style="float:right;">
                            <a class="green dept-edit" href="#" data-id="{{id}}">
                                <i class="ace-icon fa fa-pencil bigger-100"></i>
                            </a>
                            &nbsp;
                            <a class="red dept-delete" href="#" data-id="{{id}}" data-name="{{name}}">
                                <i class="ace-icon fa fa-trash-o bigger-100"></i>
                            </a>
                        </span>
                    </div>
                </li>
            {{/deptList}}
        </ol>
    </script>

    <script id="userListTemplate" type="x-tmpl-mustache">
        {{#userList}}
        <tr role="row" class="user-name odd" data-id="{{id}}"><!--even -->
            <td><a href="#" class="user-edit" data-id="{{id}}">{{username}}</a></td>
            <td>{{showDeptName}}</td>
            <td>{{mail}}</td>
            <td>{{telephone}}</td>
            <td>{{#bold}}{{showStatus}}{{/bold}}</td> <!-- 此处套用函数对status做特殊处理 -->
            <td>
                <div class="hidden-sm hidden-xs action-buttons">
                    <a class="green user-edit" href="#" data-id="{{id}}">
                        <i class="ace-icon fa fa-pencil bigger-100"></i>
                    </a>
                    <a class="red user-acl" href="#" data-id="{{id}}">
                        <i class="ace-icon fa fa-flag bigger-100"></i>
                    </a>
                </div>
            </td>
        </tr>
        {{/userList}}
    </script>

<script type="application/javascript">
   $(function(){
       var deptList; // 存储属性部门列表
       var deptMap = {}; // 缓存最新一次加载过得部门信息
       var optionStr = ""; // 选项值组成的字符串
       var lastClickDeptId = -1;

       var userMap = {}; // 存储map格式的用户信息

       // 获取id为deptListTemplate的HTML片段
       var deptListTemplate = $('#deptListTemplate').html();
       // 使用mustache引擎渲染该HTML片段
       Mustache.parse(deptListTemplate);

       var userListTemplate = $('#userListTemplate').html();
       Mustache.parse(userListTemplate);

       loadDeptTree();


       // 加载部门树方法
       function loadDeptTree(){
           $.ajax({
               url : "/sys/dept/tree.json",
               success : function (result) {
                   if (result.ret) {//成功
                       deptList = result.data;
                       //按模板渲染当前层部门
                       var rendered = Mustache.render(deptListTemplate, {deptList: result.data});
                       $("#deptList").html(rendered);
                       //渲染子孙层  递归
                       recursiveRenderDept(result.data);
                       // 绑定按钮
                       bindDeptClick();
                   } else {
                       showMessage("加载部门列表", result.msg, false)
                   }
               }
           })
       }


       //递归渲染部门列表方法
       function recursiveRenderDept(deptList) {
           //判断非空
           if (deptList && deptList.length > 0) {
               // 遍历子层
               $(deptList).each(function (i,dept) {
                   deptMap[dept.id] = dept;
                   // 子层部门不为空
                   if (dept.deptList.length > 0) {
                       // 渲染子层部门
                       var rendered = Mustache.render(deptListTemplate,{deptList: dept.deptList});
                       // 将子层部门绑定到上层
                       $("#dept_"+dept.id).append(rendered);
                       // 递归渲染子层部门的子层
                       recursiveRenderDept(dept.deptList);
                   }
               });
           }
       }


       // 绑定部门的相关点击操作
       function bindDeptClick() {
           // 点击部门名称的操作（显示该部门下的员工，该部门高亮显示，之前选中部门的高亮效果取消）
           $(".dept-name").click(function(e) {
               e.preventDefault();
               e.stopPropagation();
               var deptId = $(this).attr("data-id");
               handleDepSelected(deptId);
           });

           // 删除部门的操作
           $(".dept-delete").click(function (e) {
               // 取消默认时间
               e.preventDefault();
               // 停止时间传播 不再派发事件。终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点
               e.stopPropagation();
               // 获取指定待删除部门的id
               var deptId = $(this).attr("data-id");
               // 获取部门名称以再次确认是否删除该部门
               var deptName = $(this).attr("data-name");
               // 判断是否确定删除
               if (confirm("确定要删除部门[" + deptName + "]吗?")) {
                   // TODO : has user;
                   // 判断部门下是否有员工
                   console.log("delete dept: " + deptName);
               }
           });

           // 修改部门的操作
           $(".dept-edit").click(function(e) {
               e.preventDefault();
               e.stopPropagation();
               var deptId = $(this).attr("data-id");
               $("#dialog-dept-form").dialog({
                   model: true,
                   title: "编辑部门",
                   open: function(event, ui) {
                       $(".ui-dialog-titlebar-close", $(this).parent()).hide();
                       optionStr = "<option value=\"0\">-</option>";
                       recursiveRenderDeptSelect(deptList, 1);
                       $("#deptForm")[0].reset();
                       $("#parentId").html(optionStr);
                       $("#deptId").val(deptId);
                       var targetDept = deptMap[deptId];
                       if (targetDept) {
                           $("#parentId").val(targetDept.parentId);
                           $("#deptName").val(targetDept.name);
                           $("#deptSeq").val(targetDept.seq);
                           $("#deptRemark").val(targetDept.remark);
                       }
                   },
                   buttons : {
                       "更新": function(e) {
                           e.preventDefault();
                           updateDept(false, function (data) {
                               $("#dialog-dept-form").dialog("close");
                           }, function (data) {
                               showMessage("更新部门", data.msg, false);
                           })
                       },
                       "取消": function () {
                           $("#dialog-dept-form").dialog("close");
                       }
                   }
               });
           })
       }

       // 选中该部门是对气的渲染效果
       function handleDepSelected(deptId) {
           if (lastClickDeptId != -1) {// 之前曾选中过得部门，取消高亮
               var lastDept = $("#dept_" + lastClickDeptId + " .dd2-content:first");
               lastDept.removeClass("btn-yellow");
               lastDept.removeClass("no-hover");
           }
           // 选中的部门添加高亮
           var currentDept = $("#dept_" + deptId + " .dd2-content:first");
           currentDept.addClass("btn-yellow");
           currentDept.addClass("no-hover");
           // 将当前选中部门id赋值
           lastClickDeptId = deptId;
           // 获取当前部门下的所有员工
           loadUserList(deptId);
       }

       // 加载用户列表
       function loadUserList(deptId) {
           // console.log("load userList, deptId: " + deptId);
           // 获取部门下所有员工
           var pageSize = $("#pageSize").val();
           var url = '/sys/user/page.json?deptId='+deptId;
           var pageNo = $("#userPage .pageNo").val() || 1;

           $.ajax({
               url : url,
               data: {
                   pageSize: pageSize,
                   pageNo: pageNo
               },
               success: function (result) {
                   renderUserListAndPage(result, url);
               }
           })
       }


       // 渲染分页列表
       function renderUserListAndPage(result, url) {
           if (result.ret) {
               if (result.data.total > 0){
                   var rendered = Mustache.render(userListTemplate, {
                       userList: result.data.data,
                       "showDeptName": function() {
                           return deptMap[this.deptId].name;
                       },
                       "showStatus": function() {
                           return this.status == 1 ? '有效' : (this.status == 0 ? '无效' : '删除');
                       },
                       "bold": function() {
                           return function(text, render) {
                               var status = render(text);
                               if (status == '有效') {
                                   return "<span class='label label-sm label-success'>有效</span>";
                               } else if(status == '无效') {
                                   return "<span class='label label-sm label-warning'>无效</span>";
                               } else {
                                   return "<span class='label'>删除</span>";
                               }
                           }
                       }
                   });
                   $("#userList").html(rendered);
                   bindUserClick();
                   $.each(result.data.data, function(i, user) {
                       userMap[user.id] = user;
                   })
               } else {
                   $("#userList").html('');
               }
               var pageSize = $("#pageSize").val();
               var pageNo = $("#userPage .pageNo").val() || 1;
               renderPage(url, result.data.total, pageNo, pageSize, result.data.total > 0 ? result.data.data.length : 0, "userPage", renderUserListAndPage);
           } else {
               showMessage("获取部门下用户列表", result.msg, false);
           }
       }

        // 用户点击添加事件
       $(".user-add").click(function() {
           $("#dialog-user-form").dialog({
               model: true,
               title: "新增用户",
               open: function(event, ui) {
                   $(".ui-dialog-titlebar-close", $(this).parent()).hide();
                   optionStr = "";
                   recursiveRenderDeptSelect(deptList, 1);
                   $("#userForm")[0].reset();
                   $("#deptSelectId").html(optionStr);
               },
               buttons : {
                   "添加": function(e) {
                       e.preventDefault();
                       updateUser(true, function (data) {
                           $("#dialog-user-form").dialog("close");
                           loadUserList(lastClickDeptId);
                       }, function (data) {
                           showMessage("新增用户", data.msg, false);
                       })
                   },
                   "取消": function () {
                       $("#dialog-user-form").dialog("close");
                   }
               }
           });
       });

       // 绑定用户操作的相关按钮
       function bindUserClick(){
           // TODO :user-acl

           $(".user-edit").click(function(e) {
               e.preventDefault();
               e.stopPropagation();
               var userId = $(this).attr("data-id");
               $("#dialog-user-form").dialog({
                   model: true,
                   title: "编辑用户",
                   open: function(event, ui) {
                       $(".ui-dialog-titlebar-close", $(this).parent()).hide();
                       optionStr = "";
                       recursiveRenderDeptSelect(deptList, 1);
                       $("#userForm")[0].reset();
                       $("#deptSelectId").html(optionStr);

                       var targetUser = userMap[userId];
                       if (targetUser) {
                           $("#deptSelectId").val(targetUser.deptId);
                           $("#userName").val(targetUser.username);
                           $("#userMail").val(targetUser.mail);
                           $("#userTelephone").val(targetUser.telephone);
                           $("#userStatus").val(targetUser.status);
                           $("#userRemark").val(targetUser.remark);
                           $("#userId").val(targetUser.id);
                       }
                   },
                   buttons : {
                       "更新": function(e) {
                           e.preventDefault();
                           updateUser(false, function (data) {
                               $("#dialog-user-form").dialog("close");
                               loadUserList(lastClickDeptId);
                           }, function (data) {
                               showMessage("更新用户", data.msg, false);
                           })
                       },
                       "取消": function () {
                           $("#dialog-user-form").dialog("close");
                       }
                   }
               });
           });
       }



       //绑定添加按钮事件
       $(".dept-add").click(function () {
           //jquery内的方法dialog()
           $("#dialog-dept-form").dialog({
               // 模态 ，只能操作此dialog,而不能操作幕后的页面
               model: true,
               // dialog的title
               title: "新增部门",
               // 点击事件打开时的功能 ，一般是数据的处理
               open: function (event, ui) {
                   // 默认的关闭按钮取消，全部使用新增的button (在点击关闭时能做一些功能，而不是直接关闭)
                   $(".ui-dialog-titlebar-close",$(this).parent()).hide();
                   // 初始层级HTML
                   optionStr = "<option value=\"0\">-</option>";
                   // 遍历部门层级HTML
                   recursiveRenderDeptSelect(deptList, 1);
                   // 重置表单
                   $("#deptForm")[0].reset();
                   // 写入HTML
                   $("#parentId").html(optionStr);
               },
               buttons : {
                   "添加": function(e) {
                       e.preventDefault();
                       updateDept(true, function (data) {
                           $("#dialog-dept-form").dialog("close");
                       }, function (data) {
                           showMessage("新增部门", data.msg, false);
                       })
                   },
                   "取消": function () {
                       $("#dialog-dept-form").dialog("close");
                   }
               }
           });
       });


       // 递归获取optionStr的所有HTML的函数
       function recursiveRenderDeptSelect(deptList, level) {
           // level未传值就赋值为0
           level = level | 0;
           if (deptList && deptList.length > 0) {
               //遍历部门列表
               $(deptList).each(function (i, dept) {
                   deptMap[dept.id] = dept;
                   // 最基本的值
                   var blank = "";
                   // 当前层不是第一层
                   if (level > 1) {
                       for(var j = 3; j <= level; j++) {
                           blank += "..";
                       }
                       blank += "∟";
                   }
                   // 本层级HTML
                   optionStr += Mustache.render("<option value='{{id}}'>{{name}}</option>", {id: dept.id, name: blank + dept.name});
                   // 下一层级非空，则遍历下一层级
                   if (dept.deptList && dept.deptList.length > 0) {
                       recursiveRenderDeptSelect(dept.deptList, level + 1);
                   }
               });
           }
       }


       // 更新用户的方法 （新增  ，更新）
       function updateUser(isCreate, successCallback, failCallback) {
           $.ajax({
               url: isCreate ? "/sys/user/save.json" : "/sys/user/update.json",
               data: $("#userForm").serializeArray(),
               type: 'POST',
               success: function(result) {
                   if (result.ret) {
                       loadDeptTree();
                       if (successCallback) {
                           successCallback(result);
                       }
                   } else {
                       if (failCallback) {
                           failCallback(result);
                       }
                   }
               }
           })
       }


       // 更新部门的方法 （新增  ，更新）
       function updateDept(isCreate, successCallback, failCallback) {
           $.ajax({
               url: isCreate ? "/sys/dept/save.json" : "/sys/dept/update.json",
               data: $("#deptForm").serializeArray(),
               type: 'POST',
               success: function(result) {
                   if (result.ret) {
                       loadDeptTree();
                       if (successCallback) {
                           successCallback(result);
                       }
                   } else {
                       if (failCallback) {
                           failCallback(result);
                       }
                   }
               }
           })
       }
   })
</script>
</body>
</html>